<template>
  <div id="upload">
    <div class="hanldBox">
      <el-button @click="allDelete" type="primary" v-if="!toggleTag">批量刪除</el-button>
      <el-button @click="deleteSure" type="primary" v-if="toggleTag">確定</el-button>
      <el-button @click="deleteCancel" v-if="toggleTag">取消</el-button>
    </div>
    <div class="upload">
      <div class="upload_warp">
        <div class="upload_warp_left" @click="fileClick">
          <img src="@/public/image/add.png">
        </div>
        <div class="upload_warp_img" v-show="imgList.length!=0">
          <div class="upload_warp_img_div" v-for="(item,index) of imgList" :key="index">
            <div class="imgbox" @click="_selected($event,item)">
              <img :src="item.filePath" class="images-file" @click="handlePictureCardPreview(item.filePath)">
              <img src="@/public/image/del.png" class="upload_warp_img_div_del" @click="fileDel(index)" v-if="isPreview">
              <i class="el-icon-success select-icon" v-if="!isPreview"></i>
            </div>
          </div>
        </div>
      </div>
      <input @change="fileChange($event)" type="file" id="upload_file" multiple style="display: none">
      <el-dialog :visible.sync="dialogVisible" width="80%">
        <img width="80%" :src="dialogImageUrl" alt="">
      </el-dialog>
    </div>
  </div>
</template>
<script>

export default {
  props: {
    // 允许上传文件类型
    fileType: {
      type: Array,
      default () {
        return ['jpg', 'jpeg', 'png', 'bmp']
      }
    },
    // 最大允许上传个数
    fileCounts: {
      type: Number,
      default: 20,
      validator: function (value) {
        return value >= 1
      }
    },
    // 上传文件大小最大值(单位kb)
    fileM: {
      type: Number,
      require: true,
      default: 1024 * 1024 * 10,
      validator: function (value) {
        return value > 0
      }
    },
    getImageListFn:{
      type: Object
    },
    imgList:{
       type: Array
    }

  },
  data () {
    return {
      size: 0,
      dialogVisible: false,
      dialogImageUrl: '',
      isPreview: true, // 是否能预览大图 默认为可以
      toggleTag: false, // 批量删除按钮切换标识
      deleteArray: [], // 批量删除图片下标数组
      backData: [],
      photeId:'',
    }
  },
  watch: {
    imgList: {
      handler (newValue, oldValue) {
        this.$emit('input', newValue)
      },
      deep: true
    }
  },
  created () {
    // 获取图片列表
    this.getImageListFn()
  },
  methods: {
    // 还原状态
    backState () {
      let Obj = document.getElementsByClassName('imgbox')
      for (let i of Obj) {
        i.setAttribute('class', 'imgbox')
      }
    },
    // 确认批量删除
    deleteSure () {
      // 遍历
      this.deleteArray.forEach(item => {
        this.imgList.forEach((e, i) => {
          if (item === e) {
            this.imgList.splice(i, 1)
          }
        })
      })
      this.isPreview = true
      this.toggleTag = false
      this.backState()
    },
    // 取消批量删除
    deleteCancel () {
      this.deleteArray = []
      this.isPreview = true
      this.toggleTag = false
      this.backState()
    },
    allDelete () {
      this.deleteArray = []
      this.isPreview = false
      this.toggleTag = true
    },
    handlePictureCardPreview (file) {
      if (this.isPreview) {
        this.dialogImageUrl = file
        this.dialogVisible = true
      } else {
        this.dialogImageUrl = ''
        this.dialogVisible = false
      }
    },
    _selected (event, item) {
      // this.deleteArray = [];
      if (this.isPreview) return false
      let isClass = event.currentTarget.classList.contains('selected')
      if (!isClass) {
        event.currentTarget.classList.add('selected')
        this.deleteArray.push(item)
      } else {
        event.currentTarget.classList.remove('selected')
        if (this.deleteArray.length) {
          this.deleteArray.forEach((e, i) => {
            if (e === item) {
              this.deleteArray.splice(i, 1)
            }
          })
        }
      }
   
    },
    fileClick () {
      document.getElementById('upload_file').click()
    },
    fileChange (el) {
      
      if (!el.target.files[0].size) return
      this.fileList(el.target.files)
      el.target.value = ''
    },
    // 判断数组中是否存在某个值
    in_array (array, element) {
      for (var i = 0; i < array.length; i++) {
        if (array[i] === element) {
          return true
        }
      }
      return false
    },
    fileList (files) {
      for (let i = 0; i < files.length; i++) {
        // 判断文件类型
        let Index = files[i].type.indexOf('/')
        if (!this.in_array(this.fileType, files[i].type.substring(Index + 1))) {
          this.$message({
            message: `${files[i].name}格式错误`,
            type: 'error'
          })
          continue
        }
        // 验证文件大小
        if (files[i].size > parseInt(this.fileM) * 1024) {
          this.$message({
            message: `${files[i].name}已经大于${this.fileM}kb`,
            type: 'error'
          })
          continue
        }
        this.fileAdd(files[i])
      }
    },
    fileAdd (file) {
      let reader = new FileReader()
      reader.vue = this
      reader.readAsDataURL(file)
      reader.onload = function () {
        file.filePath = this.result
        if (this.vue.imgList.length >= this.vue.fileCounts) {
          this.vue.$message({
            message: `图片张数已经大于限制张数`,
            type: 'error'
          })
          return false
        }
        this.vue.imgList.push({
          filePath: file.filePath
        })
        
      }
    },
    fileDel (index) {
      this.imgList.splice(index, 1)
    },
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="scss">
#upload {
  padding: 15px;
  .hanldBox {
    text-align: right;
    padding-bottom:20px
  }
  .upload_warp_img_div_del {
    position: absolute;
    top: 6px;
    width: 16px;
    right: 4px;
  }
  .upload_warp_img_div_top {
    position: absolute;
    top: 0;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    line-height: 30px;
    text-align: left;
    color: #fff;
    font-size: 12px;
    text-indent: 4px;
  }
  .upload_warp_img_div_text {
    white-space: nowrap;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .upload_warp_img_div img.images-file {
    width: 100%;
    vertical-align: middle;
  }
  .upload_warp_img_div {
    position: relative;
    height: auto;
    width: 194px;
    float: left;
    display: table-cell;
    text-align: center;
    cursor: pointer;
    margin: 0 10px 10px 0;
    .imgbox {
      width: 100%;
      height: 135px;
      overflow: hidden;
      border: 1px solid #ccc;
      border-radius: 6px;
      position: relative;
      .select-icon {
        position: absolute;
        left: 5px;
        top: 5px;
        font-size: 20px;
        opacity: 0.8;
       
      }
      &.selected {
        .select-icon {
          color: #409EFF;
          opacity: 1;
        }
      }
    }
    .text {
      line-height: 20px;
    }
  }
  .upload_warp_img {
    padding-left: 10px;
    overflow: hidden;
  }
  .upload_warp_text {
    text-align: left;
    margin-bottom: 10px;
    padding-top: 10px;
    text-indent: 14px;
    border-top: 1px solid #ccc;
    font-size: 14px;
  }
  .upload_warp_right {
    float: left;
    width: 57%;
    margin-left: 2%;
    height: 100%;
    border: 1px dashed #999;
    border-radius: 4px;
    line-height: 130px;
    color: #999;
  }
  .upload_warp_left img {
    position: absolute;
    left:50%;
    top:50%;
    margin-left:-35px;
    margin-top:-35px;
  }
  .upload_warp_left {
    float: left;
    width: 194px;
    height: 135px;
    border: 1px dashed #999;
    border-radius: 4px;
    cursor: pointer;
    position: relative;
  }
  .el-button{
    height:34px !important;
    padding-top:0px;
    padding-bottom:0px;
  }
}
</style>